<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script src="./ajax.js"></script>

    <script>
      const url = "http://localhost:8000/calc/multiply";

      /* 异步函数：promise.then().then().then()的语法糖 */
      async function fn() {
        try {
          // promise对象会在将来兑现resolve(6)
          // await阻塞等待身后的Promise兑现 得到其resolve出来的数据data 6
          // await是promise.then的语法糖
          let data = await ajaxPromise({
            url,
            data: { a: 2, b: 3 },
          });

          // 上面阻塞得到结果6以后...
          // 每一个await都相当于promise.then
          console.log("data=", data);
          data = await ajaxPromise({
            url,
            // url: "http://localhost:8123/calc/multiply",
            data: { a: data, b: 4 },
          });

          // 上面阻塞得到结果24以后...
          console.log("data=", data);
          data = await ajaxPromise({
            url,
            data: { a: data, b: 5 },
          });

          console.log("最终结果", data);
        } 
        
        catch (err) {
          // 相当于promise.catch
          console.log("处理promise的毁约行为", err);
        }

        console.log("try-catch后面的代码照样被阻塞");
      }

      // 异步函数的本质是Promise回调链
      // 里面的代码从第一个await开始都是异步回调
      fn();

      // 同步代码是不会等待异步回调的
      console.log(
        "同步代码懒得等你的【返回Promise的异步函数fn】履约/毁约，同步代码继续往后执行"
      );
    </script>
  </body>
</html>
